<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php /** @var $this \Magento\DesignEditor\Block\Adminhtml\Editor\Form\Renderer\BackgroundUploader */ ?>
<?php
/** @var $element \Magento\DesignEditor\Block\Adminhtml\Editor\Form\Element\BackgroundUploader */
$element = $this->getElement();
?>

<?php $imageUploader = $element->getImageUploaderElement(); ?>
<div class="custom-file">
    <div id="<?php echo $imageUploader->getHtmlId(); ?>-uploader">
        <div class="no-display" id="<?php echo $imageUploader->getHtmlId(); ?>-container">
            <div class="action-add">
                <?php echo $imageUploader->toHtml() ?>
            </div>
            <label for="<?php echo $imageUploader->getHtmlId(); ?>"><?php echo __('Upload an Image'); ?></label>
        </div>
        <div class="uploaded-file-wrapper">
            <div class="no-display uploaded-image" id="<?php echo $imageUploader->getHtmlId(); ?>-template">
                <div class="file-row">
                    <span class="label">{{name}}</span>
                    <button class="action-delete" id="{{remove-id}}">
                        <span><?php echo __('Remove'); ?></span>
                    </button>
                </div>
            </div>
            <div class="no-display tile-background" id="<?php echo $imageUploader->getHtmlId(); ?>-tile-container">
                <?php echo $element->getCheckboxElement()->toHtml() ?>
            </div>
        </div>
    </div>

    <script type="text/javascript">
require([
    "jquery",
    "Magento_DesignEditor/js/quick-style-uploader"
], function($){

    $(document.getElementById('<?php echo $imageUploader->getHtmlId(); ?>-uploader')).quickStyleUploader({
        uploader_id: '<?php echo $imageUploader->getHtmlId(); ?>',
        container:   '<?php echo $imageUploader->getHtmlId(); ?>-uploader',
        value:       '<?php echo $imageUploader->getValue(); ?>',
        url:         '<?php echo $this->getImageUploadUrl(); ?>',
        remove_url:  '<?php echo $this->getImageRemoveUrl(); ?>',
        tile_available:'<?php echo $element->isTileAvailable(); ?>'
    });
    
});
</script>
</div>
